<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="main">
            <div class="main-mains">
                <div class="main-content">
                    <div class="main-mains-top">
                        医学课堂管理
                    </div>
                    <div class="main-top-nav">
                        <ul>
                            <router-link to="/medicalclassroom">
                                <li class="active">医学课堂列表</li>
                            </router-link>
                            <router-link to="/classroomvideo">
                                <li>课堂视频分类</li>
                            </router-link>
                        </ul>
                    </div>
                    <div class="screen clear">
                        <div class="fl" @click="addProject()">新增</div>
                        <div class="fl" @click="screen()">筛选</div>
                    </div>
                    <div class="publicTable toLongTable">
                        <table class="head_table">
                            <tr>
                                <td width="5%">序号</td>
                                <td width='7%'>所属项目</td>
                                <td width='8%'>课程名称</td>
                                <td width='7%'>课堂分类</td>
                                <td width='8%'>主讲医生</td>
                                <td width='8%'>播放量</td>
                                <td width='8%'>状态</td>
                                <td width='8%'>操作</td>
                            </tr>
                        </table>
                        <el-scrollbar>
                            <table class="content_table">
                                <tr v-for="(item,index) in listData" :key="index" :class="{active:index%2==1}">
                                    <td width="5%">{{index+1}}</td>
                                    <td width='7%'>{{projectName(item.spid)}}</td>
                                    <td width='8%'>{{item.subject}}</td>
                                    <td width='7%'>{{cateName(item.cate_id)}}</td>
                                    <td width='8%'>{{item.name}}</td>
                                    <td width='8%'>{{item.play_num}}</td>
                                    <td width='8%' v-if="item.status==1">
                                        已上架
                                    </td>
                                    <td width='8%' v-if="item.status==2">
                                        已下架
                                    </td>
                                    <td width='8%' class="operation">
                                        <span class="active" v-if="item.status==1" @click="setStatus(2,item.id)">下架</span>
                                        <span class="active" v-else @click="setStatus(1,item.id)">上架</span>
                                        <span class="active" @click="remove(item.id)">删除</span>
                                        <span class="active" @click="edit(item.id)">编辑</span>
                                    </td>
                                </tr>
                            </table>
                        </el-scrollbar>
                    </div>
                    <div class="nodataTip" v-if="showNodataTip">
                        <i class="iconfont icon-zanwuneirong"></i>
                        <h5>暂无内容</h5>
                    </div>
                    <div class="orderBotom">
                        <div class="orderBotomRight">
                            <el-pagination @current-change="handleCurrentChange" :page-size="15" layout="total, prev, pager, next" :total='totalnum'>
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <div class="system-menban" v-if="search">
            </div>
            <div class="systemPopup" v-if="search">
                <div class="topTitle">
                    <span>筛选</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con">
                    <div class="systemPopup-cons clear">
                        <div class="fl">课堂名称</div>
                        <div class="fl sel">
                            <el-input placeholder="请输入课堂名称" v-model.trim="className" clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="systemPopup-cons clear">
                        <div class="fl">主讲医生</div>
                        <div class="fl sel">
                            <el-input placeholder="请输入主讲医生" v-model.trim="doctorName" clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="systemPopup-cons clear">
                        <div class="fl">课堂分类</div>
                        <div class="fl sel">
                            <el-select clearable v-model="classType" placeholder="请选择分类">
                                <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="systemPopup-btn clear">
                        <div class="fl" @click="searchs()">确认</div>
                        <div class="fl" @click="hideSystemPopup">取消</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import medicalclassroom from "@/api/medicalclassroom";
import project from "@/api/saleProject";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "medicalclassroom",
      pages: 1,
      listData: [],
      totalnum: 0,
      showNodataTip: false,
      search: false,
      className: "",
      doctorName: "",
      classType: "",
      classOptions: [],
      catePage: 1,
      projectType: "",
      projectOptions: [],
      pageIndex: 1
    };
  },
  methods: {
    edit(id) {
      this.$router.push("/editclassroom?id=" + id);
    },
    setStatus(type, id) {
      let txt;
      if (type == 1) {
        //上架
        txt = "此操作将上架该信息, 是否继续?";
      } else {
        txt = "此操作将下架该信息, 是否继续?";
      }
      this.$confirm(txt, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const options = {
            id: id,
            status: type
          };
          medicalclassroom.setStatus(options).then(res => {
            if (res.code == 1) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    remove(id) {
      this.$confirm("此操作删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const options = {
            id: id
          };
          medicalclassroom.remove(options).then(res => {
            if (res.code == 1) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getProjectList() {
      const options = {
        page: this.pageIndex
      };
      project.getList(options).then(res => {
        if (res.code == 1) {
          for (let i = 0; i < res.data.data.length; i++) {
            this.projectOptions.push({
              value: res.data.data[i].id,
              label: res.data.data[i].topic
            });
          }
          if (res.data.data.length == 15) {
            this.pageIndex++;
            this.getProjectList();
          }
        }
      });
    },
    addProject() {
      this.$router.push("/addclassroom");
    },
    cateName(value) {
      let cateName;
      for (let i = 0; i < this.classOptions.length; i++) {
        if (value == this.classOptions[i].value) {
          cateName = this.classOptions[i].label;
        }
      }
      return cateName;
    },
    projectName(value) {
      let projectName;
      for (let i = 0; i < this.projectOptions.length; i++) {
        if (value == this.projectOptions[i].value) {
          projectName = this.projectOptions[i].label;
        }
      }
      return projectName;
    },
    getCateList() {
      const options = {
        page: this.catePage
      };
      medicalclassroom.getCateList(options).then(res => {
        if (res.code == 1) {
          for (let i = 0; i < res.data.list.length; i++) {
            this.classOptions.push({
              value: res.data.list[i].id,
              label: res.data.list[i].name
            });
          }
          if (res.data.total == 15) {
            this.catePage++;
            this.getCateList();
          }
        }
      });
    },
    searchs() {
      this.pages = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pages = val;
      this.getList();
    },
    getList() {
      this.showNodataTip = false;
      let options;
      options = {
        cate_id: this.classType,
        subject: this.className,
        name: this.doctorName,
        page: this.pages
      };
      medicalclassroom.getList(options).then(res => {
        if (res.code == 1) {
          this.search = false;
          this.listData = res.data.list;
          this.totalnum = res.data.total;
          if (!res.data.total) {
            this.showNodataTip = true;
          }
        }
      });
    },
    hideSystemPopup() {
      this.showSystemPopup = false;
      this.search = false;
    },
    screen() {
      this.search = true;
    }
  },
  mounted() {
    this.getList();
    this.getCateList();
    this.getProjectList();
  }
};
</script>

<style>
</style>
